<template>
    <div style="height: 100%;">
        <el-row type="flex" justify="center"
                :gutter="20" style="min-height: 100%;height: auto">
            <el-col :span="5" :offset="2" >
                <el-menu
                        default-active="brandComplaintType"
                        class="el-menu-vertical-demo"
                        @select="handleSelect"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        style="box-shadow: 0 4px 8px;height: 100%;border-radius:4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
                    <el-menu-item index="brandComplaintType">
                        <i class="el-icon-coordinate"></i>品牌投诉类型排行榜</el-menu-item>
                    <el-menu-item index="complaintRanking">
                        <i class="el-icon-s-data"></i>车系投诉类型排行榜</el-menu-item>
                    <el-menu-item index="placeComplaint">
                        <i class="el-icon-s-data"></i>地方投诉排行榜</el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="14"  style="height:auto;background-color:white;border-radius:4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
                <!--                        放置销售分析视图组件-->
                <transition name="fade" mode="out-in">
                <router-view></router-view>
                </transition>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    export default {
        name: "complaintsAnaly",
        data() {
            return {
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                this.$router.push({path:'/complaintsAnaly/'+key})
            }
        },
        updated() {
            console.log('update')
        }
    }
</script>

<style scoped>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
</style>